<template>
  <div class="Jvm-monitor-container">
    <el-row class="jvm-info-box" v-if="props.JvmExtraMonitor">
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="jvm-info" v-for="(item,index) in propsList" :key="item.key">
        <span class="info-title">{{item.label}}：</span>
        <span :title="props['JvmExtraMonitor'][item.key]">{{props['JvmExtraMonitor'][item.key]}}</span>
      </el-col>
    </el-row>
    <el-row class="content-container">
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="content-item-box" v-for="(item, index) in contentHtml" :key="index">
        <div class="content-item">
          <p class="content-title">{{ item.title }}</p>
          <v-chart class="content" :options="chartsOptions[item.key]" :autoresize="true"></v-chart>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ECharts from 'vue-echarts';
import {timeLineOption} from './cluster-status-monitor-method'

export default {
  name: "JvmMonitor",
  components: {
    'v-chart': ECharts
  },
  data() {
    let baseUrl = managerRemoteUrl;
    return {
      urls:{
        getSystemDataUrl: baseUrl + "/monitor/jvm/getData"
      },
      value: '',
      options: [],
      contentHtml: [
        {title: '活动线程数(个)', key: 'activeThreadCount'},
        {title: '热代码区使用率(%)', key: 'codeCacheMemoryUseRate'},
        {title: '压缩类空间使用率(%)', key: 'compressedClassSpaceUseRate'},
        {title: 'Eden区已使用(MB)', key: 'edenSpaceUsage'},
        {title: '堆内存使用率(%)', key: 'heapMemoryUseRate'},
        {title: '已加载的类个数(个)', key: 'loadedClassCount'},
        {title: '元空间已使用(MB)', key: 'metaSpaceUsage'},
        {title: '非堆内存已使用(MB)', key: 'noHeapMemoryUsage'},
        {title: '老年代区已使用(MB)', key: 'oldGenSPaceUsage'},
        {title: 'survivor区已使用(MB)', key: 'survivorSpaceUsage'},
      ],
      data: {}, // 数据
      props: {},
      chartsOptions: {
        activeThreadCount: {},
        codeCacheMemoryUseRate: {},
        compressedClassSpaceUseRate: {},
        edenSpaceUsage: {},
        heapMemoryUseRate: {},
        loadedClassCount: {},
        metaSpaceUsage: {},
        noHeapMemoryUsage: {},
        oldGenSPaceUsage: {},
        survivorSpaceUsage: {},
      },
      color: {
        activeThreadCount: ['#5ebee3', 'rgba(50, 242, 77, 0.8)', 'rgba(50, 242, 77, 0)'],
        codeCacheMemoryUseRate: ['#35b8b9', 'rgba(16, 192, 198, 0.7)', 'rgba(132, 250, 132, 0)'],
        compressedClassSpaceUseRate: ['#9EA6FF', 'rgba(158, 166, 255, 0.75)', 'rgba(158, 166, 255, 0.1)'],
        edenSpaceUsage: ['#49b6e6', 'rgba(4, 207, 255, 0.5)', 'rgba(49, 164, 254, 0)'],
        heapMemoryUseRate: ['#539bc8', 'rgba(0, 234, 255, 0.1)', 'rgba(139, 212, 254, 0.1)'],
        loadedClassCount: ['#3366e1', 'rgba(64, 118, 255, 0.6)', 'rgba(64, 118, 255, 0.1)'],
        metaSpaceUsage: ['#65e8a5', 'rgba(0, 255, 162, 0.5)', 'rgba(143, 211, 244, 0)'],
        noHeapMemoryUsage: ['#FFBF9D', 'rgba(255, 191, 157, 0.7)', 'rgba(255, 191, 157, 0)'],
        oldGenSPaceUsage: ['#01ccce', 'rgba(7, 255, 239, 0.6)', 'rgba(7, 255, 239, 0)'],
        survivorSpaceUsage: ['#9EA3FF', 'rgba(158, 163, 255, 0.7)', 'rgba(158, 163, 255, 0)'],
      },
      propsList:[
        {label:"虚拟机名称",key:"name"},
        {label:"虚拟机版本",key:"version"},
        {label:"厂商",key:"vendor"},
        {label:"启动时间",key:"startTime"},
        {label:"堆内存大小（Gb）",key:"totalHeapMemory"},
        {label:"老年代大小（Gb）",key:"totalOldGenMemory"},
        {label:"压缩类空间大小（Gb）",key:"totalCompressedClassMemory"},
        {label:"已卸载的类个数",key:"unLoadedClassCount"},
        {label:"线程峰值",key:"peakThreadCount"},
        {label:"线程总计",key:"totalThread"},
        {label:"守护线程数",key:"daemonThreadCount"},
        {label:"死锁线程数",key:"deadLockedThreadCount"},
      ],
      percentageKeys:['codeCacheMemoryUseRate','compressedClassSpaceUseRate','heapMemoryUseRate']
    }
  },
  mounted() {
    this.getOnlineHosts()
  },
  methods: {
    // 获取数据
    getOnlineHosts() {
      this.httpRequest("get", this.urls.getSystemDataUrl, {}, {
        fullSuccess: true
      }).then(res => {
        // console.log("res",res);
        this.data = res.value.data || {};
        this.props = res.value.props || {};
        this.setOption()
      })
    },
    setOption() {
      for (const key in this.data) {
        if(key !== 'collectTime') {
          let max = this.percentageKeys.includes(key) ? 100 : null;
          this.chartsOptions[key] = timeLineOption(this.data['collectTime'] || [], this.data[key] || [], this, this.color[key],max)
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
  @import "../../../assets/styles/base_style";
.Jvm-monitor-container {
  width: 100%;
  height: 100%;
  .jvm-info-box{
    padding-bottom: 10px;
    .jvm-info{
      font-size: 15px;
      color: #333;
      border-bottom: 1px dashed #ddd;
      padding: 5px;
      @include ellipsisOneRow;
      .info-title{
        font-weight: bold;
      }
    }
  }
  .content-container {
    width: 100%;
    height: 100%;
    .content-item-box{
      height: 20%;
      padding-bottom: 10px;
      .content-item {
        height: 100%;
        border: 1px solid #4ac4e1;
        background: rgba(76, 164, 255, .2);
      }
    }
    .content-item-box:nth-child(odd){
      padding-right: 10px;
    }
    @include mediaScreen(xs) {
      .content-item-box:nth-child(odd){
        padding-right: 0;
      }
    }
    .content-title {
      margin: 0;
      color: #333;
      height: 30px;
      line-height: 30px;
      padding-left: 15px;
      font-size: 15px;
      font-weight: bold;
    }
    .content {
      height: calc(100% - 30px);
      width: 100%;
      overflow: hidden;
    }
  }
}
</style>
